<!-- 在线聊天 -->
<template>
  <div class="back">
    <el-container>
      <el-header>
        <navFronted></navFronted>
      </el-header>
      <el-container class="webMain">
        <el-aside style="background-color: rgb(238, 241, 246)">
          <el-menu default-active="1" class="el-menu-vertical-demo left">
            <el-menu-item index="1">
              <i class="el-icon-location"></i>
              <span slot="title"></span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title"></span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-document"></i>
              <span slot="title"></span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title"></span>
            </el-menu-item>
          </el-menu>
          <el-menu default-active="1" class="el-menu-vertical-demo right">
            <el-menu-item index="1" class="business-item">
              <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
              <span slot="title" class="business-title">项目1</span>
              <span class="business-msg">今天怎么样？</span>
              <span class="business-time">09:30</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container class="userContent">
          <el-main class="userMain">
            <p class="userTitle">项目1</p>
          </el-main>
          <el-footer class="userFooter">
            <textarea name="msg" id="" cols="30" rows="10"></textarea>
            <el-button type="primary"
              ><i class="el-icon-position"></i>发送</el-button
            >
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import navFronted from "@/components/navFronted/navFronted.vue";
export default {
  components: {
    navFronted,
  },
  data() {
    return {};
  },
};
</script>

<style lang='scss' scoped>
.back {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  display: inline-block;
  vertical-align: top;
  width: 20%;
  min-height: 600px;
}
.webMain {
  border-top: 1px solid #dcdfe6;
  .left {
    .el-menu-item {
      padding: 0 !important;
      text-align: center;
      height: 60px;
      line-height: 60px;
      [class^="el-icon-"] {
        margin: 0;
      }
    }
  }
  .right {
    width: 80%;
    overflow-y: auto;
    position: relative;
    .is-active {
      background: rgba(64,158,255,.1);
    }
    .business-item {
      padding-left: 10px !important;
      height: 60px;
      line-height: 60px;
      &:hover:not(.is-active){
        background: #F2F5FA;
      }
      .el-avatar {
        width: 45px;
        height: 45px;
        line-height: 45px;
        margin-top: -1px;
      }
    }
    .business-title {
      position: absolute;
      top: -8px;
      left: 61px;
      font-size: 15px;
      color: rgba(0, 0, 0, 0.5);
    }
    .business-msg {
      font-size: 10px;
      display: inline-block;
      color: #3333;
      margin: 20px 5px 0;
      width: 85%;
      line-height: 20px;
      height: 20px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .business-time {
      position: absolute;
      top: -8px;
      right: 10px;
      color: #3333;
      font-size: 10px;
    }
  }
}
.userContent {
  position: relative;
  .el-main {
    padding: 0;
    height: 74% !important;
    width: 100%;
  }
  .userMain {
    .userTitle {
      text-align: center;
      padding: 13px 0px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.5);
      background: #F2F5FA;
    }
  }
  .userFooter {
    position: absolute;
    left: 0;
    bottom: 75px;
    width: 100%;
    height: 26% !important;
    padding: 0;
    textarea {
      width: 100%;
      height: 73%;
      margin: 0px;
      border: none;
      outline: none;
      padding: 10px;
      border-top: 1px solid #e6e6e6;
      resize: none;
    }
    .el-button {
      position: absolute;
      right: 15px;
      bottom: 10px;
      padding: 8px;
      font-size: 12px;
    }
  }
}
</style>
